<template>
  <a-card :bordered="false">
    <!-- 抽屉 -->
    <a-drawer
      title="组件列表"
      :width="screenWidth"
      @close="onClose"
      :visible="visible"
    >
      <!-- 抽屉内容的border -->
      <div
        :style="{
            padding:'10px',
            border: '1px solid #e9e9e9',
            background: '#fff',
          }">

        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" :form="form">
            <a-row :gutter="24">

              <a-col :md="8" :sm="12">
                <a-form-item label="组件名">
                  <a-input placeholder="请输入组件名" v-model="queryParam.name"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="12">
                <a-form-item label="拖拽元素ID">
                  <a-input placeholder="请输入组件编码" v-model="queryParam.elementId"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
              </a-col>

            </a-row>
          </a-form>
        </div>

        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
          <a-dropdown v-if="selectedRowKeys.length > 0">
            <a-menu slot="overlay">
              <a-menu-item key="1" @click="batchDel">
                <a-icon type="delete"/>
                删除
              </a-menu-item>
            </a-menu>
            <a-button style="margin-left: 8px"> 批量操作
              <a-icon type="down"/>
            </a-button>
          </a-dropdown>
        </div>

        <!-- table区域-begin -->
        <div>
          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;margin-top:10px;">
            <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a
            style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
            <a style="margin-left: 24px" @click="onClearSelected">清空</a>
          </div>

          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical"/>
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </span>

          </a-table>
        </div>
        <!-- table区域-end -->
      </div>
    </a-drawer>
    <!-- 表单区域 -->
    <sysComponent-modal ref="modalForm" @ok="modalFormOk"></sysComponent-modal>
  </a-card>
</template>

<script>
  import pick from 'lodash.pick'
  import {filterObj} from '@/utils/util';
  import SysComponentModal from './modules/SysComponentModal'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'

  export default {
    name: "SysComponentList",
    mixins: [JeecgListMixin],
    components: {
      SysComponentModal
    },
    data() {
      return {
        // 表头
        columns: [
          {
            title: '组件名',
            align: "center",
            dataIndex: 'name'
          },
          {
            title: '拖拽元素ID',
            align: "center",
            dataIndex: 'elementId'
          },
          {
            title: '访问路径',
            align: "center",
            dataIndex: 'path'
          },
          {
            title: '描述说明',
            align: "center",
            dataIndex: 'description'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            scopedSlots: {customRender: 'action'},
          }
        ],
        queryParam: {
          name: '',
          elementId: ''
        },
        title: "操作",
        visible: false,
        screenWidth: 800,
        model: {},
        appId: "",
        form: this.$form.createForm(this),
        url: {
          list: "/sys/component/list",
          delete: "/sys/component/delete",
          deleteBatch: "/sys/component/deleteBatch"
        }
      }
    },
    computed: {
    },
    methods: {
      add(appId) {
        this.appId = appId;
        this.edit({});
      },
      edit(record) {
        if (record.id) {
          this.appId = record.id;
        }
        this.queryParam = {}
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.model.appId = this.appId;
        this.visible = true;
        // 当其它模块调用该模块时,调用此方法加载组件数据
        this.loadData();
      },
      getQueryParams() {
        var param = Object.assign({}, this.queryParam);
        param.appId = this.appId;
        param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        return filterObj(param);
      },

      // 添加字典数据
      handleAdd() {
        this.$refs.modalForm.add(this.appId);
        this.$refs.modalForm.title = "新增";
      },
      showDrawer() {
        this.visible = true
      },
      onClose() {
        this.visible = false
        this.form.resetFields();
        this.dataSource = [];
      },
      // 抽屉的宽度随着屏幕大小来改变
      resetScreenSize() {
        let screenWidth = document.body.clientWidth;
        if (screenWidth < 600) {
          this.screenWidth = screenWidth;
        } else {
          this.screenWidth = 600;
        }
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>